<script setup>
import { getAllCategory,deleteCategoryByName,updateCategory,addCategoryFunc } from "@/api/category.js";
import { ref } from "vue";
import {ElMessage} from "element-plus";
const categoryList = ref([]);
const getCategoryList = async () => {
  const res = await getAllCategory();
  categoryList.value = res.data;
};
getCategoryList();

// 删除分类
const deleteCategory = async (category) => {
  const res = await deleteCategoryByName(category.categoryName);
  ElMessage.success(res.data);
  await getCategoryList();
};

// 修改分类
const currentCategory = ref({
  categoryId: "",
  categoryName: "",
});
// 弹窗控制
const editDialogVisible = ref(false);
const editCategory = (category) => {
  currentCategory.value = { ...category };
  editDialogVisible.value = true;
};
const saveCategory = async () => {
  if (!currentCategory.value.categoryName) {
    ElMessage.error("分类名称不能为空");
    return;
  }
  const res = await updateCategory(currentCategory.value);
  editDialogVisible.value = false;
  ElMessage.success("修改成功");
  await getCategoryList();
};

// 添加分类
const addCategoryVisible = ref(false);
const newCategoryName = ref("");
const addCategory = async () => {
  if (!newCategoryName.value) {
    ElMessage.error("分类名称不能为空");
    return;
  }
  const res = await addCategoryFunc(newCategoryName.value);
  ElMessage.success("分类添加成功");
  addCategoryVisible.value = false;
  newCategoryName.value = "";
  await getCategoryList();
};

</script>

<template>
<div class="category-container">
  <h1 class="title">🌼 分类管理列表</h1>
  <el-button type="success" @click="addCategoryVisible=true" >添加分类</el-button>
  <el-table :data="categoryList" border style="width: 100%;margin-top: 10px" >
    <el-table-column prop="categoryId" label="分类 ID" width="180" />
    <el-table-column prop="categoryName" label="分类名称" />
    <el-table-column label="操作" width="200">
      <template #default="scope">
        <el-button type="primary" size="small" @click="editCategory(scope.row)">修改</el-button>
        <el-button type="danger" size="small" @click="deleteCategory(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  
  <!-- 修改分类弹窗 -->
  <el-dialog
      v-model="editDialogVisible"
      title="修改分类"
      width="30%"
      :before-close="() => (editDialogVisible = false)"
  >
    <el-form :model="currentCategory" label-width="80px">
      <el-form-item label="分类 ID">
        <el-input v-model="currentCategory.categoryId" disabled />
      </el-form-item>
      <el-form-item label="分类名称" required>
        <el-input v-model="currentCategory.categoryName" placeholder="请输入分类名称" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="editDialogVisible = false">取消</el-button>
      <el-button type="primary" @click="saveCategory">保存</el-button>
    </template>
  </el-dialog>
  
  <!-- 添加分类弹窗 -->
  <el-dialog
      v-model="addCategoryVisible"
      title="添加分类"
      width="30%"
      :before-close="() => (addCategoryVisible = false)"
  >
    <el-form :model="newCategoryName" label-width="80px">
      <el-form-item label="分类名称" required>
        <el-input v-model="newCategoryName" placeholder="请输入分类名称" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="addCategoryVisible = false">取消</el-button>
      <el-button type="primary" @click="addCategory()">保存</el-button>
    </template>
  </el-dialog>

</div>
</template>

<style scoped>
.category-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  min-height: 1000px;
}

.title {
  text-align: center;
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: bold;
  color: #409EFF;
}

.el-table {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}

.el-table th {
  background-color: #f0f2f5;
  color: #333;
  font-weight: bold;
  text-align: center;
}

.el-table td {
  text-align: center;
  color: #666;
}

.el-table tr:hover {
  background-color: #f5f7fa;
}
</style>